<template>
    <div class="mar-x-15 mar-b-20">
        <div v-for="(item, index) in archivesChildList" :key="index" class="bg-white border-rad-10 mar-t-20 pad-20">
            <h4>{{ item.meta.title }}</h4>
            
            <div class="flex align-center mar-t-10">
                <template v-if="item.children">
                    <div
                        v-for="(j, h) in item.children"
                        :key="h"
                        class="text-center mar-r-40 cur-pointer"
                        @click="skipToPage(j)"
                    >
                        <SvgIcons
                            :iconClass="j.meta.icon"
                            :style="{
                                fontSize: '40px',
                            }"
                        />
                        <span class="dis-block mar-t-5 font-14">{{ j.meta.title }}</span>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    import SvgIcons from "@/components/SvgIcons"
    import Utils from '@/utils/utils'
    import { getRouters } from '@/apis/menuManage'

    export default {
        name: 'Archives',

        components: {
            SvgIcons,
        },

        data() {
            return {
                // 菜单唯一 id
                menuId: null,

                // 二级、三级菜单列表
                archivesChildList: [],
            }
        },

        created() {
            // 查询菜单列表
            this.findMenuList()
        },

        watch: {
            // 监听路由变化
            '$route': {
                handler(to, from) {
                    this.menuId = to.query.menuId
                },
                deep: true, // 深度监听
                immediate: true // 第一次初始化渲染就可以监听
            }
        },

        methods: {
            // 查询菜单列表
            async findMenuList() {
                let data = await getRouters({ parentId: this.menuId })

                if (data.code === 200) {
                    this.archivesChildList = data.data
                }
            },

            // 跳转到页面
            skipToPage(row) {
                if (!row.path) {
                    Utils.popUpMsg('warning', '页面不存在！', 1000)
                    return
                }

                this.$router.push(row.component)
                this.$store.commit('lib/setTagList', { path: row.component, fatherPath: row.meta.fatherPath, icon: row.meta.icon, title: row.meta.title, active: row.active, name: row.name })
            }
        },
    }
</script>